<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
let allPic = ref(["pic1", "pic2", "pic3", "pic4", "pic5"]),
  isWidth = ref("pic1")
const styWidth = {
  width: "800px",
  transition: "ease 0.7s"
},
  sty = {
    width: "150px",
    transition: "ease 0.7s"
  }
const picClick = (e) => {
  isWidth.value = e.target.id
}
</script>

<template>
  <div id="contain">
    <div v-for="(item,index) in allPic" :id="item" class="pic" @click="picClick($event)"
      :style="isWidth==item?styWidth:sty"></div>
  </div>
</template>

<style lang='less'>
#contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  .pic {
    height: 800px;
    margin: 15px;
    border-radius: 30px;
  }

  #pic1 {
    background-color: antiquewhite;
  }

  #pic2 {
    background-color: aquamarine;
  }

  #pic3 {
    background-color: blueviolet;
  }

  #pic4 {
    background-color: cadetblue;
  }

  #pic5 {
    background-color: chartreuse;
  }
}
</style>